<template>
	<view>
		<view class="home_bg">
			<view style="position: relative;top:10%;display: flex;justify-content: space-around;">
				<view style="color:#fff;">
					<view>欧兔博士</view>
					<view style="padding-left: 60rpx;">DR&nbsp;&nbsp;02</view>
				</view>
				<view style="width: 498rpx;
height: 68rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid #FFFFFF;">
					
				</view>
			</view>
			
			<view style="position: relative;left: 263rpx;top: 55%;">
				<view style="width: 263rpx;height: 521rpx;">
					<image mode="aspectFit" src="../../static/index/Group 44.png" style="width: 100%; height: 100%;" />
				</view>
			</view>
			
			<view style="position: relative;left: 270rpx;top: 15%;color: #fff;font-size: 25rpx;">
				品味人生<text style="padding-left: 35rpx;">健康生活</text>
			</view>
		</view>
		
		<view style="padding: 32rpx;">
			<view style="display: flex;justify-content: space-between;">
				<view class="card_item">
					<view class="yy">
						<image mode="aspectFit" src="../../static/index/Group 9.png" />
					</view>
					预约
				</view>
				<view class="card_item">
					<view class="yy">
						<image mode="aspectFit" src="../../static/index/Group 10.png" />
					</view>
					联盟
				</view>
				<view class="card_item">
					<view class="yy">
						<image mode="aspectFit" src="../../static/index/Group 11.png" />
					</view>
					商城
				</view>
			</view>
		</view>
		<view style="padding:0 22rpx 0rpx 22rpx;height: 60vh;">
			<view style="padding-top: 27rpx;">
				<view style="display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class="left1" @click="goUrl('pingpai')">
						<view class="img1">
							<image mode="aspectFit" src="../../static/index/Group 12.png" />
						</view>
						<view class="text"><text>品&nbsp;&nbsp;牌</text></view>
						<view style="position: relative;left: 23rpx;bottom:37rpx;width: 283rpx;height: 37rpx;background: url('../../static/index/Group 45.png') no-repeat; background-size: cover;">
							<image mode="aspectFit" src="../../static/index/Group 16.png" style="width: 18rpx;height: 18rpx;position: absolute;right: 15rpx;bottom: 10rpx;" />
						</view>
					</view>
					<view class="right1" @click="goUrl('huiyuan')">
						<view class="img1">
							<image mode="aspectFit" src="../../static/index/Group 13.png" />
						</view>
						<view class="text"><text>会&nbsp;&nbsp;员</text></view>
						<view style="position: relative;left: 23rpx;bottom:37rpx;width: 283rpx;height: 37rpx;background: url('../../static/index/Group 45.png') no-repeat; background-size: cover;">
							<image mode="aspectFit" src="../../static/index/Group 16.png" style="width: 18rpx;height: 18rpx;position: absolute;right: 15rpx;bottom: 10rpx;" />
						</view>
					</view>
				</view>
			</view>
			
			<view style="padding-top: 27rpx;">
				<view class="left2" @click="goUrl('shalong')">
					<view class="img1">
							<image mode="aspectFit" src="../../static/index/Group 14.png" />
						</view>
						<view class="text"><text>沙&nbsp;&nbsp;龙</text></view>
						<view style="position: relative;left: 23rpx;bottom:37rpx;width: 283rpx;height: 37rpx;background: url('../../static/index/Group 45.png') no-repeat; background-size: cover;">
							<image mode="aspectFit" src="../../static/index/Group 16.png" style="width: 18rpx;height: 18rpx;position: absolute;right: 15rpx;bottom: 10rpx;" />
						</view>
					</view>
				</view>
				
				<view class="right2" @click="goUrl('live')">
					<view class="img1">
							<image mode="aspectFit" src="../../static/index/Group 15.png" />
						</view>
						<view class="text"><text>直&nbsp;&nbsp;播</text></view>
						<view style="position: relative;left: 23rpx;bottom:37rpx;width: 283rpx;height: 37rpx;background: url('../../static/index/Group 45.png') no-repeat; background-size: cover;">
							<image mode="aspectFit" src="../../static/index/Group 16.png" style="width: 18rpx;height: 18rpx;position: absolute;right: 15rpx;bottom: 10rpx;" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goUrl(url){
				uni.navigateTo({
					url:`./${url}/${url}`
				})
			}
		}
	}
</script>

<style scoped lang="less">
.home_bg{
	width: 100%;
	height: 60vh;
	background-color: red;
	background: url('../../static/index/1130 1.png') no-repeat;
	background-size: cover;
}
.card_item{
	width: 189rpx;
	height: 189rpx;
	background: #F0F0F2;
	box-shadow: 4rpx 4rpx 12rpx 0rpx rgba(58,58,58,0.15);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	text-align: center;
	font-weight: bold;
	color: #000000;
	line-height: 23rpx;
	font-size: 30rpx;
	.yy{
		width: 189rpx;
		height: 139rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.left1{
	float: left;
	width: 336rpx;
	height: 429rpx;
	background: url('../../static/index/Rectangle 88.png') no-repeat;
	background-size: cover;
	text-align: center;
	.img1{
		width: 189rpx;
		height: 139rpx;
		margin-left: 22%;
		margin-top: 89rpx;
		image{
			width: 106rpx;
			height: 106rpx;
		}
	}
	.text{
		font-weight: 400;
		color: #000000;
		line-height: 102rpx;
		margin-bottom: 44rpx;
		font-size: 35rpx;
	}
}
.right1{
	float: right;
	width: 336rpx;
	height: 429rpx;
	background: url('../../static/index/Rectangle 89.png') no-repeat;
	background-size: cover;
	text-align: center;
	.img1{
		width: 189rpx;
		height: 139rpx;
		margin-left: 22%;
		margin-top: 89rpx;
		image{
			width: 106rpx;
			height: 106rpx;
		}
	}
	.text{
		font-weight: 400;
		color: #000000;
		line-height: 102rpx;
		margin-bottom: 44rpx;
		font-size: 35rpx;
	}
}
.left2{
	float: left;
	width: 336rpx;
	height: 429rpx;
	background: url('../../static/index/Rectangle 90.png') no-repeat;
	background-size: cover;
	text-align: center;
	.img1{
		width: 189rpx;
		height: 139rpx;
		margin-left: 22%;
		margin-top: 89rpx;
		image{
			width: 106rpx;
			height: 106rpx;
		}
	}
	.text{
		font-weight: 400;
		color: #000000;
		line-height: 102rpx;
		margin-bottom: 44rpx;
		font-size: 35rpx;
	}
}
.right2{
	float: right;
	width: 336rpx;
	height: 429rpx;
	background: url('../../static/index/Rectangle 91.png') no-repeat;
	background-size: cover;
	text-align: center;
	.img1{
		width: 189rpx;
		height: 139rpx;
		margin-left: 22%;
		margin-top: 89rpx;
		image{
			width: 106rpx;
			height: 106rpx;
		}
	}
	.text{
		font-weight: 400;
		color: #000000;
		line-height: 102rpx;
		margin-bottom: 44rpx;
		font-size: 35rpx;
	}
}
</style>
